<script setup lang="ts">
  import fileIcon from '@/assets/image/modules/code/detail-work-drawing.svg'
  import video from '@/assets/image/pages/order/new/video.png'
  import { useOrderFinishInfo } from './services'
  import { ref } from 'vue'
  import { ArrowClickParam } from './types'
  import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'

  const { finishOrderInfos, getOrderFinishInfoLoading, getOrderFinishInfo } = useOrderFinishInfo()

  /**
   * 这个集合的作用是为了存储所有的文件列表容器，这个是一维数组，不能直接使用
   * 还需要拆分成可使用的结构
   */
  const filesRefs = ref<HTMLDivElement[] | null>(null)

  /**
   * 可直接使用的文件列表容器集合
   */
  const operateFilesRefs = ref<Array<Array<HTMLDivElement>>>([])

  /**
   * 这个集合是存储左右箭头的激活状态
   */
  const arrowStates = ref<Array<Array<'left' | 'right'>>>([])
  const handleFilesArrowClick = (param: ArrowClickParam) => {
    if (filesRefs.value && filesRefs.value.length > 0) {
      if (param.direction === 'right') {
        arrowStates.value[param.infoIndex][param.fieldIndex] = 'left'
        operateFilesRefs.value[param.infoIndex][
          param.fieldIndex
        ].style.transform = `translateX(-100%)`
      } else {
        arrowStates.value[param.infoIndex][param.fieldIndex] = 'right'
        operateFilesRefs.value[param.infoIndex][param.fieldIndex].style.transform = `translateX(0)`
      }
    }
  }

  const pdfDialogVisible = ref(false)
  const pdfPreviews = ref<Array<string>>([])
  const pdfPreviewDialogTitle = ref('附件')
  const currentPreviewPdfIndex = ref(0)
  const handlePreviewPdf = (infoIndex: number, fieldIndex: number, fileIndex: number) => {
    currentPreviewPdfIndex.value = fileIndex
    pdfPreviews.value = finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].val
    pdfPreviewDialogTitle.value = finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].name
    pdfDialogVisible.value = true
  }
  const onClosePdfPreviewDialog = () => {
    currentPreviewPdfIndex.value = 0
    pdfPreviews.value = []
    pdfPreviewDialogTitle.value = '附件'
    pdfDialogVisible.value = false
  }

  const videoDialogVisible = ref(false)
  const videoPreviews = ref<Array<string>>([])
  const videoPreviewDialogTitle = ref('视频')
  const currentPreviewVideoIndex = ref(0)
  const handlePreviewVideo = (infoIndex: number, fieldIndex: number, fileIndex: number) => {
    currentPreviewVideoIndex.value = fileIndex
    videoPreviews.value = finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].val
    videoPreviewDialogTitle.value =
      finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].name
    videoDialogVisible.value = true
  }
  const onCloseVideoPreviewDialog = () => {
    currentPreviewVideoIndex.value = 0
    videoPreviews.value = []
    videoPreviewDialogTitle.value = '附件'
    videoDialogVisible.value = false
  }

  defineExpose({
    getOrderFinishInfo: (id: string) => {
      getOrderFinishInfo(id).then(() => {
        operateFilesRefs.value = []
        finishOrderInfos.value.forEach((info) => {
          arrowStates.value.push(info.customFieldFile.map(() => 'right'))
        })

        /**
         * 将文件列表容器拆分成可使用的结构，并存储在新的集合里
         */
        if (filesRefs.value && filesRefs.value.length > 0) {
          for (let i = 0; i < finishOrderInfos.value.length; ++i) {
            operateFilesRefs.value.push(
              filesRefs.value.slice(0, finishOrderInfos.value[i].customFieldFile.length),
            )
            filesRefs.value.splice(0, finishOrderInfos.value[i].customFieldFile.length)
          }
        }
      })
    },
    getOrderFinishInfoLoading,
  })
</script>

<template>
  <div v-if="finishOrderInfos.length > 0" class="finish_order_info">
    <div class="title">结单信息</div>
    <div class="info_list">
      <div v-for="(info, infoIndex) in finishOrderInfos" :key="infoIndex" class="info_container">
        <div class="title">
          <div class="line"></div>
          <span>{{ info.title }}</span>
        </div>
        <div class="content">
          <div class="txt">
            <div v-for="field in info.customFieldTxt" :key="field.id" class="info_item">
              <div class="label">
                {{ field.name || '' }}
                <div class="middle">:</div>
              </div>
              <h-tooltip-text
                :max-width="160"
                :height="16"
                :text="field.val || ''"
                text-align="left"
              />
            </div>
            <div v-for="field in info.customFieldRate" :key="field.id" class="info_item">
              <div class="label">
                {{ field.name || '' }}
                <div class="middle">:</div>
              </div>
              <div class="value">
                <div class="rate_container">
                  <el-rate style="height: 16px" disabled :model-value="field.val / 2" allow-half />
                  <span>{{ field.val }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="file">
            <div
              v-for="(field, fieldIndex) in info.customFieldFile"
              :key="field.id"
              class="info_item"
            >
              <div class="label">
                {{ field.name || '' }}
                <div class="middle">:</div>
              </div>

              <div class="file_list">
                <div
                  v-if="field.val.length >= 6 && arrowStates.length > 0"
                  :class="[
                    'arrow',
                    arrowStates[infoIndex][fieldIndex] === 'left'
                      ? 'enabled_arrow'
                      : 'disabled_arrow',
                  ]"
                  @click="handleFilesArrowClick({ infoIndex, fieldIndex, direction: 'left' })"
                >
                  <i class="iconfont icon-arrow-left"></i>
                </div>
                <div class="list">
                  <div ref="filesRefs" class="list_content">
                    <div
                      v-for="(file, fileIndex) in field.val.filter((field) => !!field)"
                      :key="fileIndex"
                      class="file"
                    >
                      <HImage
                        v-show="field.type === 5"
                        :src="file"
                        :width="80"
                        :height="50"
                        :padding="2"
                        fit="contain"
                        :show-del-btn="false"
                        :preview-src-list="[file]"
                        :initial-index="fileIndex"
                      />
                      <HImage
                        v-show="field.type === 6"
                        :src="fileIcon"
                        :width="80"
                        :height="50"
                        fit="contain"
                        :is-show-img-preview="false"
                        :show-del-btn="false"
                        @preview="handlePreviewPdf(infoIndex, fieldIndex, fileIndex)"
                      />
                      <HImage
                        v-show="field.type === 7"
                        :src="video"
                        :width="80"
                        :height="50"
                        fit="contain"
                        :is-show-img-preview="false"
                        :show-del-btn="false"
                        @preview="handlePreviewVideo(infoIndex, fieldIndex, fileIndex)"
                      />
                    </div>
                  </div>
                </div>
                <div
                  v-if="field.val.length >= 6 && arrowStates.length > 0"
                  :class="[
                    'arrow',
                    arrowStates[infoIndex][fieldIndex] === 'right'
                      ? 'enabled_arrow'
                      : 'disabled_arrow',
                  ]"
                  @click="handleFilesArrowClick({ infoIndex, fieldIndex, direction: 'right' })"
                >
                  <i class="iconfont icon-arrow-right"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--附件预览弹窗-->
  <HDialog
    v-model="pdfDialogVisible"
    :title="pdfPreviewDialogTitle"
    :width="800"
    @close="onClosePdfPreviewDialog"
  >
    <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
      <el-button
        type="primary"
        :disabled="currentPreviewPdfIndex === 0"
        :icon="ArrowLeftBold"
        style="padding: 0 14px"
        @click="currentPreviewPdfIndex--"
      />
      <iframe :src="pdfPreviews[currentPreviewPdfIndex]" width="600" height="500"></iframe>
      <el-button
        type="primary"
        :disabled="currentPreviewPdfIndex === pdfPreviews.length - 1"
        :icon="ArrowRightBold"
        style="padding: 0 14px"
        @click="currentPreviewPdfIndex++"
      />
    </div>
  </HDialog>

  <!--视频预览弹窗-->
  <HDialog
    v-model="videoDialogVisible"
    :title="videoPreviewDialogTitle"
    :width="800"
    @close="onCloseVideoPreviewDialog"
  >
    <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
      <el-button
        type="primary"
        :disabled="currentPreviewVideoIndex === 0"
        :icon="ArrowLeftBold"
        style="padding: 0 14px"
        @click="currentPreviewVideoIndex--"
      />
      <video :src="videoPreviews[currentPreviewVideoIndex]" controls width="600"></video>
      <el-button
        type="primary"
        :disabled="currentPreviewVideoIndex === videoPreviews.length - 1"
        :icon="ArrowRightBold"
        style="padding: 0 14px"
        @click="currentPreviewVideoIndex++"
      />
    </div>
  </HDialog>
</template>

<style scoped lang="scss">
  @import './FinishOrderInfo.scss';
</style>
